import {
  size,
  IFormProps,
  pageSize,
  dateTimeFormat,
  formItemLayout,
  getUploadResult,
  uploadUrl,
  tailFormItemLayoutLeft,
  tailFormItemLayout,
  getFileList,
  getImages,
  dateFormat,
  getToken
} from "../../utils/common";
import React from "react";
import { connect } from "dva";
import {
  Form,
  Row,
  Col,
  Button,
  Input,
  Table,
  Popconfirm,
  Select,
  message,
  Tabs,
  InputNumber,
  Checkbox
} from "antd";
import moment from "moment";
const Styles = require("../../styles/index.less");
import queryString from "query-string";
import * as api from "../../api/api";
import { PaginationProps } from "antd/lib/pagination";
import CommisionList from "../../components/users/CommisionList";
import CashList from "../../components/users/CashList";
import UserList from "../../components/users/UserList";
import RedPacketList from "../../components/users/RedPacketList";
import PointList from "../../components/users/PointList";
import WalletList from "../../components/users/WalletList";
const TabPane = Tabs.TabPane;

export interface IUserPros extends IFormProps {
  user: any;
}
class User extends React.PureComponent<IUserPros, any> {
  constructor(props) {
    super(props);
  }

  state = {};

  componentDidMount() {
    this.search();
  }

  search = () => {
    const { id } = queryString.parse(this.props.location.search);
    if (id) {
      this.getUser(id);
      this.getUserCommisions({ userId: id, pageIndex: 1, pageSize });
      this.getUserCashes({ userId: id, pageIndex: 1, pageSize });
      this.getSpread0Users({ userId: id, pageIndex: 1, pageSize });
      this.getSpread1Users({ userId: id, pageIndex: 1, pageSize });
      this.getUserWallet({ userId: id, pageIndex: 1, pageSize });
    } else {
      message.error("缺少id参数");
    }
  };

  getUser = id => {
    this.props.dispatch({
      type: "user/getUser",
      payload: {
        id
      }
    });
  };

  getUserCommisions = (payload?) => {
    if (!payload) {
      payload = this.props.user.userCommisionSearchs;
    } else {
      payload = Object.assign(
        {},
        this.props.user.userCommisionSearchs,
        payload
      );
    }
    this.props.dispatch({
      type: "user/getUserCommisions",
      payload
    });
  };

  getUserRedPacket = (payload?) => {
    if (!payload) {
      payload = this.props.user.userRedPacketSearchs;
    } else {
      payload = Object.assign(
        {},
        this.props.user.userRedPacketSearchs,
        payload
      );
    }
    this.props.dispatch({
      type: "user/getUserRedPacket",
      payload
    });
  };

  getUserWallet = (payload?) => {
    if (!payload) {
      payload = this.props.user.userWalletSearchs;
    } else {
      payload = Object.assign({}, this.props.user.userWalletSearchs, payload);
    }
    this.props.dispatch({
      type: "user/getUserWallet",
      payload
    });
  };

  getUserCashes = (payload?) => {
    if (!payload) {
      payload = this.props.user.userCashSearchs;
    } else {
      payload = Object.assign({}, this.props.user.userCashSearchs, payload);
    }
    this.props.dispatch({
      type: "user/getUserCashes",
      payload
    });
  };

  getSpread0Users = (payload?) => {
    if (!payload) {
      payload = this.props.user.spread0UserSearchs;
    } else {
      payload = Object.assign({}, this.props.user.spread0UserSearchs, payload);
    }
    this.props.dispatch({
      type: "user/getSpread0Users",
      payload
    });
  };

  getSpread1Users = (payload?) => {
    if (!payload) {
      payload = this.props.user.spread1UserSearchs;
    } else {
      payload = Object.assign({}, this.props.user.spread1UserSearchs, payload);
    }
    this.props.dispatch({
      type: "user/getSpread1Users",
      payload
    });
  };

  getUserPoint = (payload?) => {
    if (!payload) {
      payload = this.props.user.userPointSearchs;
    } else {
      payload = Object.assign({}, this.props.user.userPointSearchs, payload);
    }
    this.props.dispatch({
      type: "user/getUserPoint",
      payload
    });
  };

  reCash = form => {
    this.props.dispatch({
      type: "user/reCash",
      payload: {
        form,
        callback: () => {
          this.getUserCashes();
        }
      }
    });
  };

  reset = () => {
    this.props.form.resetFields();
  };

  render(): JSX.Element {
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.props;
    const {
      user,
      userCommisions: { totalCount: commisionCount, items: commisions },
      userCommisionSearchs: { pageIndex: cpageIndex, pageSize: cpageSize },
      userCashes: { totalCount: cashCount, items: cashes },
      userCashSearchs: { pageIndex: apageIndex, pageSize: apageSize },
      spread0Users: { totalCount: spread0UserCount, items: spread0Users },
      spread0UserSearchs: { pageIndex: u0pageIndex, pageSize: u0pageSize },
      spread1Users: { totalCount: spread1UserCount, items: spread1Users },
      spread1UserSearchs: { pageIndex: u1pageIndex, pageSize: u1pageSize },
      userRedPacket: { totalCount: redPacketCount, items: redPackets },
      userRedPacketSearchs: { pageIndex: redpageIndex, pageSize: redpageSize },
      userWallet: { totalCount: walletCount, items: wallets },
      userPoint: { totalCount: pointCount, items: points },
      userPointSearchs: { pageIndex: pointpageIndex, pageSize: pointpageSize },
      userWalletSearchs: {
        pageIndex: walletpageIndex,
        pageSize: walletpageSize
      }
    } = this.props.user;

    const commisionpageChange = (pageIndex, pageSize) => {
      let payload = Object.assign({}, this.props.user.userCommisionSearchs, {
        pageIndex,
        pageSize
      });
      this.getUserCommisions(payload);
    };
    const commisionpagination: PaginationProps | boolean = {
      total: commisionCount,
      defaultCurrent: 1,
      current: cpageIndex,
      pageSize: cpageSize,
      showSizeChanger: true,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSizeOptions: ["10", "20", "30", "50"],
      onShowSizeChange: commisionpageChange,
      onChange: commisionpageChange
    };

    const redPacketpageChange = (pageIndex, pageSize) => {
      let payload = Object.assign({}, this.props.user.userRedPacketSearchs, {
        pageIndex,
        pageSize
      });
      this.getUserRedPacket(payload);
    };

    const redpacketpagination: PaginationProps | boolean = {
      total: redPacketCount,
      defaultCurrent: 1,
      current: redpageIndex,
      pageSize: redpageSize,
      showSizeChanger: true,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSizeOptions: ["10", "20", "30", "50"],
      onShowSizeChange: redPacketpageChange,
      onChange: redPacketpageChange
    };

    const pointpageChange = (pageIndex, pageSize) => {
      let payload = Object.assign({}, this.props.user.userPointSearchs, {
        pageIndex,
        pageSize
      });
      this.getUserPoint(payload);
    };

    const pointpagination: PaginationProps | boolean = {
      total: pointCount,
      defaultCurrent: 1,
      current: pointpageIndex,
      pageSize: pointpageSize,
      showSizeChanger: true,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSizeOptions: ["10", "20", "30", "50"],
      onShowSizeChange: pointpageChange,
      onChange: pointpageChange
    };

    const walletpageChange = (pageIndex, pageSize) => {
      let payload = Object.assign({}, this.props.user.userWalletSearchs, {
        pageIndex,
        pageSize
      });
      this.getUserWallet(payload);
    };

    const walletpagination: PaginationProps | boolean = {
      total: walletCount,
      defaultCurrent: 1,
      current: walletpageIndex,
      pageSize: walletpageSize,
      showSizeChanger: true,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSizeOptions: ["10", "20", "30", "50"],
      onShowSizeChange: walletpageChange,
      onChange: walletpageChange
    };

    const cashpageChange = (pageIndex, pageSize) => {
      let payload = Object.assign({}, this.props.user.userCashSearchs, {
        pageIndex,
        pageSize
      });
      this.getUserCashes(payload);
    };
    const cashpagination: PaginationProps | boolean = {
      total: cashCount,
      defaultCurrent: 1,
      current: apageIndex,
      pageSize: apageSize,
      showSizeChanger: true,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSizeOptions: ["10", "20", "30", "50"],
      onShowSizeChange: cashpageChange,
      onChange: cashpageChange
    };
    const user0pageChange = (pageIndex, pageSize) => {
      let payload = Object.assign({}, this.props.user.spread0UserSearchs, {
        pageIndex,
        pageSize
      });
      this.getSpread0Users(payload);
    };
    const user0pagination: PaginationProps | boolean = {
      total: spread0UserCount,
      defaultCurrent: 1,
      current: u0pageIndex,
      pageSize: u0pageSize,
      showSizeChanger: true,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSizeOptions: ["10", "20", "30", "50"],
      onShowSizeChange: user0pageChange,
      onChange: user0pageChange
    };

    const user1pageChange = (pageIndex, pageSize) => {
      let payload = Object.assign({}, this.props.user.spread1UserSearchs, {
        pageIndex,
        pageSize
      });
      this.getSpread1Users(payload);
    };
    const user1pagination: PaginationProps | boolean = {
      total: spread1UserCount,
      defaultCurrent: 1,
      current: u1pageIndex,
      pageSize: u1pageSize,
      showSizeChanger: true,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSizeOptions: ["10", "20", "30", "50"],
      onShowSizeChange: user1pageChange,
      onChange: user1pageChange
    };

    return (
      <Row className={Styles.F_BG_WHITE1}>
        <Row className={Styles.F_BG_WHITE}>
          <Tabs defaultActiveKey="1">
            <TabPane tab="用户信息" key="1">
              <Col span={18}>
                <Form>
                  <Form.Item label="昵称" {...formItemLayout}>
                    {user && user.name}
                  </Form.Item>
                  <Form.Item label="手机号码" {...formItemLayout}>
                    {user && user.phoneNumber}
                  </Form.Item>
                  <Form.Item label="头像" {...formItemLayout}>
                    <img width="100px" src={user && user.avatar} />
                  </Form.Item>
                  <Form.Item label="佣金金额" {...formItemLayout}>
                    {user && user.commision}
                  </Form.Item>
                  {/* <Form.Item label="红包金额" {...formItemLayout}>
                                        {user && user.userRedPacket}
                                    </Form.Item> */}
                  <Form.Item label="钱包" {...formItemLayout}>
                    {user && user.userWallet}
                  </Form.Item>
                  <Form.Item label="体验金" {...formItemLayout}>
                    {user && user.points}
                  </Form.Item>
                  <Form.Item label="已释放体验金" {...formItemLayout}>
                    {user && user.canUsePoints}
                  </Form.Item>
                  <Form.Item label="注册时间" {...formItemLayout}>
                    {user && moment(user.creationTime).format(dateTimeFormat)}
                  </Form.Item>
                  <Form.Item {...tailFormItemLayout}>
                    <Button size={size} onClick={this.props.history.goBack}>
                      取消
                    </Button>
                  </Form.Item>
                </Form>
              </Col>
            </TabPane>
            {user && user.id ? (
              <TabPane tab="用户佣金记录" key="2">
                <CommisionList
                  loading={loading}
                  commisions={commisions}
                  onSearch={this.getUserCommisions}
                  pagination={commisionpagination}
                  pageIndex={cpageIndex}
                  pageSize={cpageSize}
                />
              </TabPane>
            ) : (
              undefined
            )}
            {user && user.id ? (
              <TabPane tab="用户提现记录" key="3">
                <CashList
                  loading={loading}
                  cashes={cashes}
                  onSearch={this.getUserCashes}
                  onReCash={this.reCash}
                  pagination={cashpagination}
                  pageIndex={apageIndex}
                  pageSize={apageSize}
                />
              </TabPane>
            ) : (
              undefined
            )}
            {user && user.id ? (
              <TabPane tab="一级推广用户" key="4">
                <UserList
                  loading={loading}
                  users={spread0Users}
                  onSearch={this.getSpread0Users}
                  pagination={user0pagination}
                  pageIndex={u0pageIndex}
                  pageSize={u0pageSize}
                />
              </TabPane>
            ) : (
              undefined
            )}
            {user && user.id ? (
              <TabPane tab="二级推广用户" key="5">
                <UserList
                  loading={loading}
                  users={spread1Users}
                  onSearch={this.getSpread1Users}
                  pagination={user1pagination}
                  pageIndex={u1pageIndex}
                  pageSize={u1pageSize}
                />
              </TabPane>
            ) : (
              undefined
            )}
            {/* {
                            user && user.id ? (
                                <TabPane tab="用户红包记录" key="6">
                                    <RedPacketList loading={loading}
                                        redpacket={redPackets}
                                        onSearch={this.getUserRedPacket}
                                        pagination={redpacketpagination}
                                        pageIndex={redpageIndex}
                                        pageSize={redpageSize}
                                    />
                                </TabPane>
                            ) : (undefined)
                        } */}
            {user && user.id ? (
              <TabPane tab="用户钱包记录" key="7">
                <WalletList
                  loading={loading}
                  wallet={wallets}
                  onSearch={this.getUserWallet}
                  pagination={walletpagination}
                  pageIndex={walletpageIndex}
                  pageSize={walletpageSize}
                />
              </TabPane>
            ) : (
              undefined
            )}
            {user && user.id ? (
              <TabPane tab="用户体验金记录" key="8">
                <PointList
                  loading={loading}
                  point={points}
                  onSearch={this.getUserPoint}
                  pagination={pointpagination}
                  pageIndex={pointpageIndex}
                  pageSize={pointpageSize}
                />
              </TabPane>
            ) : (
              undefined
            )}
          </Tabs>
        </Row>
      </Row>
    );
  }
}

export default connect(({ user, loading: { models: { user: loading } } }) => ({
  user,
  loading
}))(Form.create()(User));
